<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<!--<script type="text/javascript" src="echarts.min.js"></script>-->
<script type="text/javascript" src='echarts.min.js'></script>

<body>
<div id="main" style="height=500px;"></div>
<!--<div id="main" style="height: 500px;"></div>-->
</body>
<script type="text/javascript" charset="UTF-8">
var charts=echarts.init(document.getElementById('main'))
<!--  var myCharts = echarts.init(document.getElementById('main'))-->
// <!--  var time = JSON.parse(time.toList())-->
var data=JSON.parse(data.toList())
<!--  var data = JSON.parse(data.toList())-->
var option={
};
echarts.setOption(option);
  var option = {
    title: {
      text: '订单转换'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}%'
    },
    series: [
      {
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '70%',
        min: 0,
        max: 100,
        minSize: '20%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          formatter:'{c}%',
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data:data
      },
      {
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '70%',
        min: 0,
        max: 100,
        minSize: '20%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
         label: {
          show: true,
          formatter:'{b} {c}',
          position: 'right'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data:data
      }
    ]
  };
  myCharts.setOption(option);


</script>

</html>